<template>
    <Menu theme="dark" style="width: 200px;" @on-select="onSelect" @on-open-change="onOpenChange" accordion>
        <Submenu name="mysql">
            <template slot="title">
                <Icon type="ios-book" />
                Mysql
            </template>
            <template  v-for="listMysqlUrl in listMysql" >
                <MenuItem :name=listMysqlUrl.host>
                    {{listMysqlUrl.name}}
                </MenuItem>
            </template>
        </Submenu>
        <Submenu name="2">
            <template slot="title">
                <Icon type="ios-cog" />
                Oracle(停用)
            </template>
            <MenuItem name="2-1" to="/gnervcat/redis">localhost</MenuItem>
        </Submenu>
        <Submenu name="3">
            <template slot="title">
                <Icon type="ios-cog" />
                Redis(停用)
            </template>
            <MenuItem name="3-1">localhost</MenuItem>
        </Submenu>
    </Menu>
</template>

<script>
    import {getDatabaseConfig} from '../../assets/databaseConfig'

    export default {
        name: "g-sider",
        data () {
            return {
                listMysql: []
            }
        },
        methods: {
            initSiderList () {

            },
            onSelect: function(name) {
                console.log(name);
                this.$router.push({
                    path: `/gnervcat/alltable`,
                    params: {
                        id: `123123123`
                    }
                });
            },
            onOpenChange: function (name) {

            }
        },
        created : function() {
            let s = getDatabaseConfig();
            let parse = JSON.parse(s);
            this.listMysql = parse;
        }
    }
</script>

<style scoped>
    Submenu {
        overflow: hidden;
    }
</style>